<template>
	<view class="titfix" :style="{height:getstateheight()+gettitileheight()+'px'}">
		 <view class="">
		   	<image v-if="carddata" :src="ip+`/`+carddata.img" mode="aspectFill"></image>
		   	<view class="" :style="{height:getstateheight()+'px'}"></view>
		   	<view class="titheight" :style="{height:gettitileheight()+'px'}">
		   		<view class="iconfont icon-fanhui" @click="back"></view>
		   	</view>
		</view>
	</view>
	<image class="titimg" v-if="carddata" :src="ip+`/`+carddata.img" mode="aspectFill"></image>
<view class="" style="padding: 0 25rpx;">
	<view class="contit" v-if="carddata">
		  {{type}} | {{carddata.title}}
	</view>
	<view class="pricebox" v-if="carddata">
		  <view class="l">
			  <text class="l-pr">{{carddata.price * 30}}</text>
			  <text class="c">元/月</text>
			  <text class="r">押二付一</text> 
		  </view>
		   <view class="r">
			   <view >
		          <view @click="leavelove" v-if="islove" class="iconfont icon-xingxing1"></view> 
		          <view @click="getlove" v-else class="iconfont icon-xingxing"></view> 
				  {{islove?"已收藏":"收藏"}}
				</view> 
		  </view>
	</view>
	<view class="xx" v-if="carddata">
		   <view class="item">
			   <view class="top">{{carddata.sum}}室</view>
			   <view class="bu">房型</view>
		   </view>
		   <view class="item">
		   			   <view class="top">{{carddata.erea}}m^2</view>
		   			   <view class="bu">面积</view>
		   </view>
		   <view class="item">
		   			   <view class="top">{{type}}</view>
		   			   <view class="bu">类型</view>
		   </view>
		   <view class="item">
		   			   <view class="top">{{carddata.fx}}</view>
		   			   <view class="bu">朝向</view>
		   </view>
	
	</view>
	<view class="tag" v-if="carddata">
		<view class="tagbox">
			   <view class="itag" v-for="i in tagdata" :key="i" :class="{select:carddata.tag.split('-').includes(i)}">{{i}}</view>
		</view>
	</view>
</view>
<view class="contexts" v-if="carddata">
	<view class="ttt">房屋介绍</view>
	   <view class="texts">{{carddata.context}}</view>
</view>
<view class="userinfo" v-if="carddata">
	   <view class="userindo-con">
		   	<image v-if="userinfodata.img.includes('http')" :src="userinfodata.img" mode="aspectFill"></image>
		    <image v-else :src="ip+'/'+userinfodata.img" mode="aspectFill"></image>
			<view class="r">
				<view class="top">{{userinfodata.name}}</view>
				<view class="bu">
					 <view class="b-l">业务本人</view>
					 <view class="b-r">已实名</view>
				</view>
			</view>
	   </view>
</view>
   <view class="" style="height: 150rpx;"></view>
   <view class="button" style="height: 150rpx;">
	   <view class="scbox">
	      <view @click="leavelove" v-if="islove" class="iconfont icon-xingxing1"></view> 
	      <view @click="getlove" v-else class="iconfont icon-xingxing"></view> 
	   		{{islove?"已收藏":"收藏"}}
	   	</view> 
	   <view class="viewb" @click="liaot">微聊</view>
	   <view class="viewb phone" @click="cllphone">电话</view>
   </view>
   <Aixin v-if="isaixin"/>
</template>

<script setup>
	import { ip } from "@/utils/getinfo.js"
	import {onLoad} from "@dcloudio/uni-app"
	import {ref,computed} from 'vue' 
	import Aixin from '@/components/aixin/aixin.vue'
	import {getfindid,userfind,gethoselove,gethosealllove,gethoseleavelove,getuserlookhistroy} from '@/api/index.js'
	import {getstateheight,gettitileheight} from "@/utils/getinfo.js"
	import userstore from "@/store/userlogin.js"
	import {storeToRefs} from 'pinia'
	const tagdata=["冰箱","洗衣机","热水器","宽带","沙发","可做饭","抽烟机","燃气灶","电磁炉","微波炉","橱柜","餐桌","电视","空调","衣柜","床","卫生间","智能门锁","阳台","暖气","书桌","邻地铁","精装修"]
	const carddata=ref()
	const colordata=["primary","success","warning","error","royal"]
	const userinfodata=ref()
	const useuserstore=userstore()
	const {userlove}=storeToRefs(useuserstore)
	const isaixin=ref(false)
	const islove=computed(()=>{
		if(!carddata.value)return
		   return userlove.value.find(e=>e.hoseid==carddata.value.id)
	})
	const liaot=()=>{
		uni.navigateTo({
			url:`/pages/liaot/liaot?id=${userinfodata.value.id}&name=${userinfodata.value.name}&img=${userinfodata.value.img}`
		})
	}
	onLoad(async e=>{
		const rudata=await getfindid(e.id)
		const userinfo=await userfind(rudata.data.userid)
		await getuserlookhistroy(e.id)
		userinfodata.value=userinfo.data
		console.log(userinfo)
		carddata.value=rudata.data
		console.log(carddata.value)
	})
	const leavelove=async ()=>{
		const rudata=await gethoseleavelove(carddata.value.id,useuserstore.userlogin.id)
		console.log(rudata)
		alllove()
	}
	const cllphone=()=>{
		uni.showModal({
			title:"提示",
			content:"是否跳转至电话页？",
			success(e) {
				if(e.confirm){
					uni.makePhoneCall({
						phoneNumber:"18888596470"
					})
				}
			}
		})
	}
	const type=computed(()=>{
		if(carddata.value){
			if(carddata.value.type=='0') return "整租"
			if(carddata.value.type=='1') return "合租/单间"
			if(carddata.value.type=='2') return "公寓"
			if(carddata.value.type=='3') return "短租"
		}
			 
	    })
		const back=()=>{
			uni.navigateBack()
		}
		const getlove=async()=>{
			console.log(carddata.value.id)  
			  const rudata=await gethoselove(carddata.value.id)
			  alllove()
			 showaixin()
			  console.log(rudata)
		}
		const showaixin=()=>{
			  isaixin.value=true
			  setTimeout(()=>{
				  isaixin.value=false
			  },5000)
		}
		const alllove=async ()=>{
			 const rudata= await gethosealllove()
			  useuserstore.userlove=rudata.data
		}
</script>

<style lang="scss" scoped>
	.icon-xingxing1{
		color: #f57c00;
	}
	.select{
			 border: 2rpx solid #f57c00 !important;
			 background-color:#fff5e5  !important;
			 color: #f57c00 !important;
	}
	.tagbox{
		width: 100%;
		display: grid;
		grid-template-columns: repeat(4,1fr);
		overflow: hidden;	
		padding:25rpx 20rpx;
		gap: 20rpx;
		>view{
			height: 60rpx;
			border-radius:60rpx ;
			background-color: #f7f7f7;
			font-size: 25rpx;display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.button{
		position: fixed;
		bottom: 0;
		width: 100%;
		border-top: 2rpx solid #eee;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0 20rpx;
		background-color: #fff;
		.scbox{
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 25rpx;
			gap: 10rpx;
			width: 150rpx;
			.iconfont{
				font-size: 30rpx;
			}
		}
		.viewb{
			height:  60%;
			width: 30%;
			background-color: #f57c00;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-weight: 700;
			font-size: 25rpx;
		}
		.phone{
			background-color: #e23940;
		}
	}
	.titfix{
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;
		overflow: hidden;
		>view{
			width: 100%;
			position: relative;
			.titheight{
				display: flex;
				align-items: center;
				padding-left:20px ;
				color: #fff;
				position: absolute;
				z-index: 9999;
				width: 100%;
				border-bottom: 1rpx solid #ebebeb;
			}
			image{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 600rpx;
				z-index: 1;
			}
		}
	}
	.titimg{
		height: 600rpx;
		width: 100%;
	}
    .contit{
		font-size: 35rpx;
		font-weight: 700;
		padding: 25rpx 0 25rpx 25rpx;
		line-height: 55rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
    .pricebox{
        padding:0 40rpx 30rpx 25rpx;
		display: flex;
		justify-content: space-between;
		.l{
			display: flex;
            height: 100%;
			align-items:flex-end;
			font-size: 20rpx;
			.l-pr{
			     font-size: 40rpx;
				 font-weight: 700;
				 color: #f57c00;
			}
			.c{
				color: #f57c00;
				margin: 0 10rpx 6rpx 10rpx;
			}
			.r{
				color: #7b7b7b;
				margin-bottom: 6rpx;
			}
		}
		.r{
			display: flex;
			align-items: flex-end;
			color: #7b7b7b;
			>view{
				display: flex;
				align-items: center;
				gap: 10rpx;
				font-size: 20rpx;
			}
		}
	}
    .xx{
		height: 170rpx;
		border-top: 1rpx solid #f0f0f0;
		border-bottom: 1rpx solid #f0f0f0;
		display: flex;
		justify-content: space-between;
		>view{
			width: 15%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 20rpx;
			.top{
				font-size: 30rpx;
				font-weight: 700;
			}
			.bu{
				font-size: 20rpx;
				color: #7b7b7b;
			}
		}

	}
	.tag{
		padding: 20rpx 0;
		display: flex;
		gap: 20rpx;
		flex-wrap: wrap;
		min-height: 90rpx;
	}
    .contexts{
		padding-top: 20rpx;
		background-color: #f1f1f1;
		.ttt{
			padding: 20rpx;
			font-size: 30rpx;
			font-weight: 700;
			background-color: #fff;
		}
		.texts{
			background-color: #fff;
			font-size: 25rpx;
			padding: 0 20rpx 20rpx 20rpx;
			text-indent: 2em;
			line-height: 45rpx;
			min-height: 150rpx;
		}
	}
    .userinfo{
		height: 220rpx;
		padding: 20rpx 0;
		background-color: #f1f1f1;
		.userindo-con{
			height: 100%;
			background-color: #fff;
			display: flex;
			align-items: center;
			image{
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin: 0 20rpx;
			}
			.r{
				display: flex;
				flex-direction: column;
				justify-content: center;
				gap: 10rpx;
				.top{
					font-size: 26rpx;
					font-weight: 700;
				}
				.bu{
					display: flex;
					font-size: 20rpx;
					gap: 10rpx;
					>view{
						padding: 3rpx 10rpx;
						background-color: #f57c00;
						border-radius: 8rpx;
						color: #fff;
					}
					.b-r{
						background-color: #fff;
						border: 1rpx solid #f57c00;
						color: #f57c00;
					}
				}
			}
		}
	}
</style>
